<template>
  <el-container>
    <el-header height="80px">
      <router-link :to="{ name: 'Home' }">
        <img height="50" :src="logo" alt="logo" />
      </router-link>
      <ul>
        <li>
          <router-link exact-active-class="active" :to="{ name: 'Home' }"
            >home</router-link
          >
        </li>
        <li>
          <router-link exact-active-class="active" :to="{ name: 'About' }"
            >about</router-link
          >
        </li>
      </ul>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
          :uniqueOpened="true"
          default-active="1"
          :router="true"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="1" :route="{ name: 'Home' }">
            <i class="el-icon-location"></i>
            <template #title>联系人</template>
          </el-menu-item>
          <el-menu-item index="2" :route="{ name: 'Article' }">
            <i class="el-icon-menu"></i>
            <template #title>Article</template>
          </el-menu-item>
          <el-menu-item index="4" :route="{ name: 'Home' }">
            <i class="el-icon-setting"></i>
            <template #title>导航四</template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <slot></slot>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import logo from "@/assets/logo.png";

export default {
  name: "AdminLayout",
  data() {
    return {
      logo,
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style scoped lang="stylus">
.el-header {
  display: flex;
  align-items: center;

  ul {
    display: flex;
    align-items: center;
    margin: 0;
    list-style: none;

    li {
      padding: 0 10px;

      a {
        color:#545c64 ;
        font-size: 20px;

        &.active {
          color: red;
          font-weight: bold;
          font-size: 24px;
        }
      }

      //a.active {
      //
      //}
    }
  }
}
.el-aside {
  background-color: #545c64;

  .el-submenu,
  .el-submenu__title,
  .el-menu-item {
    padding-left: 0;
  }
}

.el-main {
  height: calc(100vh - 82px);
}
</style>
